<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>PHCHAT</title>
</head>

<body>

    <link rel="stylesheet" href="CSS/index.css">
    <script src="../jquery-3.2.1.js"></script>
    <!-- <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> -->
    <script src="jquery.cookie.js"></script>
    <script type='text/javascript' src='webim.config.js'></script>
    <script type='text/javascript' src='strophe-1.2.8.min.js'></script>
    <script type='text/javascript' src='websdk-1.4.10.js'></script>
    <script src="../vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../styles/iview.css">
    <!-- 引入组件库 -->
    <script src="../iview.min.js"></script>


    <style>
        .input_box {
            margin: 0 50px;
            margin-top: 20px;
        }
    </style>




    <div class="main-div" id="main-div">

        <div class="main">


            <img class="logo" src="images/logo1.png" alt="">
            <div class="login" style="height:300px">
                <div class="h20"></div>



                <div v-show='setp==1'>

                    <i-input v-model="id" :placeholder="lang._001" style="width: 300px" class="input_box"></i-input>
                    <I-input v-model="phone" style="width:300px;margin:20px 0 0 50px;" :placeholder="lang._005">
                        <span slot="prepend">+63</span>
                    </I-input>


                    <!-- <i-Button type="primary"  loading></i-Button> -->
                    <i-input v-model="code" :placeholder="lang._006" style="width: 229px;float:left;margin-right:0" class="input_box"></i-input>
                    <i-Button type="primary" :loading="loading" @click="toLoading()" style="float:left;margin-top:20px;margin-left:10px;width: 60px;
            text-align: center;" number='true'>
                        <span v-if="!loading">{{lang._007}}</span>
                        <span v-else></span>
                    </i-Button>
                    <p class="login-txt-left">
                        <a href="../">{{lang.login}}</a>
                    </p>
                    <div class="btn-login-div">
                        <button class="btn-login" @click="find()">{{lang._026}}</button>
                    </div>

                </div>

                <div v-show="setp==2">
                    <i-input v-model="password" type="password" :placeholder="lang._003" style="width: 300px" class="input_box"></i-input>

                    <i-input v-model="configpas" type="password" :placeholder="lang._004" style="width: 300px" class="input_box"></i-input>

                    <p class="login-txt-left">
                        <a href="../">{{lang.login}}</a>
                    </p>
                    <div class="btn-login-div">
                        <button class="btn-login" @click="changepass()">{{lang.submit}}</button>
                    </div>
                </div>

                <!--第三方登錄-->
            </div>

        </div>
    </div>
    <script src="phchat.js"></script>
    <script>

        var a='<%- JSON.stringify(lang) %>'
        
        var lang=eval('(' + a + ')');
        var page = new Vue({
            el: '#main-div',
            data: {
                id: '',
                username: '',
                password: '',
                configpas: '',
                phone: '',
                code: '',
                loading: false,
                setp: 1,
                lang:lang
            },
            methods: {
                instance(type, title, message, btn1, btn2, callback = "") {
                    switch (type) {
                        case 'success':
                            this.$Modal.success({
                                title: title,
                                content: message,
                                okText: btn1,
                                cancelText: btn2
                            });
                            break;
                        case 'info':
                            this.$Modal.info({
                                title: title,
                                content: message,
                                okText: btn1,
                                cancelText: btn2,

                            });
                            break;
                        case 'warning':
                            this.$Modal.warning({
                                title: title,
                                content: message,
                                okText: btn1,
                                cancelText: btn2
                            });
                            break;
                        case 'error':
                            this.$Modal.error({
                                title: title,
                                content: message,
                                okText: btn1,
                                cancelText: btn2
                            });
                            break;
                        case 'successchange':
                        this.$Modal.success({
                                title: title,
                                content: message,
                                okText: btn1,
                                cancelText: btn2,
                                onOk: () => {
                                    window.location.href = "../";
                                    
                                }
                            });
                    }
                },
                find() {
                    var t = this;

                    // if(t.password=="" || t.password.match(/^\w+$/)==null|| t.password.length>16 ||t.password.length<8 )
                    // {
                    // t.instance('error',t.lang.notic,'密码必须为8-16为数字加英文',t.lang.ok,"CANCEL");
                    // return false;
                    // } 

                    if (t.phone.length != 10 && t.phone.length != 11) {
                        t.instance('error', t.lang.notic, t.lang._014, t.lang.ok, t.lang.cancel);
                        return false;
                    }
                    if (t.id == "") {
                        t.instance('error', t.lang.notic,t.lang._001, t.lang.ok, t.lang.cancel);
                        return false;
                    }
                    if (t.code == "") {
                        t.instance('error', t.lang.notic,t.lang._006, t.lang.ok, t.lang.cancel);
                        return false;
                    }
                    t.setp = 2;
                },
                toLoading() {
                    var t = this;
                    if (!t.loading) {
                    t.loading = true;

                    if (t.phone.length != 10 && t.phone.length != 11) {
                        t.instance('error', t.lang.notic, t.lang._014, t.lang.ok, t.lang.cancel);
                        return false;
                        t.loading=false;
                    }
                    if (t.id == "") {
                        t.instance('error', t.lang.notic, t.lang._001, t.lang.ok, t.lang.cancel);
                        return false;
                        t.loading=false;
                    }
                    $.post('./findsend', {
                        phone: t.phone,
                        id: t.id
                    }, function (result) {
                        console.log(result);
                        if (result == -2) {
                            t.instance('error', t.lang.notic, t.lang._027, t.lang.ok, t.lang.cancel);
                            t.loading=false;
                        } else if (result == 1) {
                            t.instance('success', '恭喜', t.lang._009, t.lang.ok, t.lang.cancel);
                            t.loading = true;
                                setTimeout(() => {
                                    t.loading = false;
                                }, 60000);
                        } else if (result == -3) {
                            t.instance('error', t.lang.notic,t.lang._019, t.lang.ok, t.lang.cancel);
                            t.loading=false;
                        } else {
                            t.instance('error', t.lang.notic,t.lang._016, t.lang.ok, t.lang.cancel);
                            t.loading=false;
                        }
                    })
                }
                },
                changepass() {
                    var t = this;
                    if (t.password != t.configpas) {
                        t.instance('error', t.lang.notic, t.lang._015, t.lang.ok, t.lang.cancel);
                        return false;
                    }
                    if (t.password == "" || t.password.match(/^\w+$/) == null || t.password.length > 16 || t.password
                        .length < 8) {
                        t.instance('error', t.lang.notic, t.lang._013, t.lang.ok, t.lang.cancel);
                        return false;
                    }
                    $.post('./change', {
                        id: t.id,
                        password: t.password,
                        code: t.code,
                        phone: t.phone
                    }, function (result) {
                        console.log(result);
                        if(result==-3){
                            t.instance('error', t.lang.notic, t.lang._027, t.lang.ok, t.lang.cancel);
                        }
                        if(result==-2){
                            t.instance('error', t.lang.notic, t.lang._022, t.lang.ok, t.lang.cancel);
                        }
                        if(result==1){
                            t.instance('successchange', t.lang.gx, t.lang._028, t.lang.ok, t.lang.cancel);
                        }
                    })
                }

            }
            
        });
    </script>
</body>

</html>